<template>
  <div class="video-player">
    <div>
      <el-tabs
        v-model="ID"
        type="card"
        style="justify-content: start"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="item in originalData"
          :key="item.ID"
          :label="item.NAME"
          :name="item.ID"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
    <div id="divPlugin" class="divPlugin" ref="divPlugin" v-if="plugin"></div>
    <div class="down" v-else>
      <a href="http://www.lhyh.cn/iSecure_Center.exe">下载</a>
    </div>
  </div>
</template>
<script>
export default {
  name: "videoPlayer",
  props: {
    cameraIndexCode: { type: String, default: '' },
    layout: { type: String, default: '3x3' },
    videoDialog: { type: Boolean, default: true },
  },
  data () {
    return {
      //   ID: this.$route.query.VID.toString(),
      ID: '',
      originalData: [],
      plugin: true,
      oWebControl: null,   //插件对象
      initCount: 0,
      pubKey: '',         //公钥加密
      video_init_data: {
        appkey: '23894539',
        Secret: '9wV7Fp0yHJWfYApE2fhj',
        ip: '111.160.78.62',
        port: '444',
        snapDir: 'D:\\SnapDir',
        videoDir: 'D:\\VideoDir',
        layout: '3x3',
        encryptedFields: 'secret',
        enableHttps: '1',
      },
      video_play_data: {
        cameraIndexCode: '',
        streamMode: 0,
        transMode: 1,
        gpuMode: 0,
        recordLocation: 1, // 录像存储类型 0-中心存储 1-设备存储 视频回放时用设备存储
        wndId: 0,
        cascade: 1,
      },
      //videoWidth videoHeight screenWidth screenHeight 
      //这四个参数为了使插件大小和屏幕宽度一致变化
      videoWidth: 700,
      videoHeight: 500,
      screenWidth: document.documentElement.clientWidth,//屏幕宽度
      screenHeight: document.documentElement.clientHeight,//屏幕高度
      //设置窗口遮挡 根据浏览器大小变化视频插件的大小
      iLastCoverLeft: 0,
      iLastCoverTop: 0,
      iLastCoverRight: 0,
      iLastCoverBottom: 0,
    };
  },
  created () {
    this.getzzzlistdata();
  },
  mounted () {

    //插件初始化
    this.initPlugin();
    this.getzzzlistdata();
    this.$nextTick(() => {
      this.videoWidth = this.$refs.divPlugin.offsetWidth;
      this.videoHeight = this.$refs.divPlugin.offsetHeight;
    })
    // 监听窗口变化
    let _this = this;
    window.onresize = function () { // 定义窗口大小变更通知事件 
      _this.screenWidth = document.documentElement.clientWidth; //窗口宽度
      _this.screenHeight = document.documentElement.clientHeight; //窗口高度
    };
    window.addEventListener('scroll', function () {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
        this.setWndCover();
      }
    });
  },
  destroyed () {
    if (this.oWebControl != null) {
      this.oWebControl.JS_Disconnect().then(function () { }, function () { });
    }
  },
  methods: {
    // 根据转运站ID，获取摄像头数据列表
    async getDataList () {
      const params = {
        zzzID: this.ID,
      }
      console.log(params)
      const { data } = await this.$Http.get('/RubbishVehicle/GetStationHikInfo', { params })
      this.video_play_data.cameraIndexCode = ''
      this.video_play_data.wndId = 0
      if (data.length != 0) {
        data.forEach((val) => {
          this.video_play_data.cameraIndexCode = val.监控点编码
          this.video_play_data.wndId = this.video_play_data.wndId + 1
          this.startRealPlay();
          console.log('监控点编号:', this.video_play_data.cameraIndexCode)
        });

      } else {
        this.$message.error('未获取到摄像头数据');
        this.endRealPlay();
      }
    },
    //获取转运站列表
    async getzzzlistdata () {
      this.originalData = [{
        "ID": "10",
        "NAME": "天津雍泰生活垃圾处理公司",
      }, {
        "ID": "1",
        "NAME": "大韩庄垃圾填埋场",
      }]


      //   var url = '/CarService/getPlaceStation?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')
      //   const { data } = await this.$Http.get(url)
      //   this.originalData = data
      //   console.log(this.ID)
      if (this.ID == 0) {
        this.ID = this.originalData[0].ID
      }
      console.log(this.ID)
    },
    handleClick (tab, event) {
      var carInfo = this.originalData[tab.index]
      this.ID = carInfo.ID
      this.getDataList()
    },
    //   插件初始化
    initPlugin () {
      let _this = this
      this.oWebControl = new WebControl({
        szPluginContainer: "divPlugin",
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        // 用于 IE10 使用 ActiveX 的 clsid 
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
        cbConnectSuccess: (e) => {
          this.plugin = true;
          _this.setCallbacks();
          if (_this.oWebControl) {
            _this.oWebControl.JS_StartService("window", {
              dllPath: "./VideoPluginConnect.dll"
              //dllPath: "./DllForTest-Win32.dll"
            }).then((res) => {
              _this.oWebControl.JS_CreateWnd("divPlugin", _this.videoWidth, _this.videoHeight).then(() => {
                console.log("JS_CreateWnd success");
                _this.initVideo();
              });
            }, function () {
            });
          } else {
          }
        },
        cbConnectError: () => {
          console.log("cbConnectError");
          _this.oWebControl = null;
          $("#divPlugin").html("插件未启动，正在尝试启动，请稍候...");
          WebControl.JS_WakeUp("VideoWebPlugin://");
          _this.initCount++;
          if (_this.initCount < 3) {
            setTimeout(() => {
              _this.initPlugin();
            }, 3000)
          } else {
            $("#divPlugin").html("插件启动失败，请检查插件是否安装！");
            this.plugin = false;
          }
        },

        cbConnectClose: () => {
          console.log("cbConnectClose");
          this.oWebControl.JS_Disconnect().then(function () { }, function () { });
          this.oWebControl = null;
        }
      });
    },
    // 设置窗口控制回调
    setCallbacks () {
      this.oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: this.cbIntegrationCallBack
      });
    },
    // 推送消息
    // cbIntegrationCallBack(oData) {
    //     this.$message.warning((JSON.stringify(oData.responseMsg)));
    // },
    // 初始化参数
    initVideo () {
      // console.log(this.getPubKey)
      this.getPubKey(() => {
        let appkey = this.video_init_data.appkey;
        let secret = this.setEncrypt(this.video_init_data.Secret);
        let ip = this.video_init_data.ip;
        let szPort = this.video_init_data.port;
        let snapDir = this.video_init_data.snapDir;
        let videoDir = this.video_init_data.videoDir;
        let layout = this.layout;
        let encryptedFields = ['secret'];

        appkey = appkey.replace(/(^\s*)/g, "");
        appkey = appkey.replace(/(\s*$)/g, "");

        secret = secret.replace(/(^\s*)/g, "");
        secret = secret.replace(/(\s*$)/g, "");

        ip = ip.replace(/(^\s*)/g, "");
        ip = ip.replace(/(\s*$)/g, "");

        szPort = szPort.replace(/(^\s*)/g, "");
        szPort = szPort.replace(/(\s*$)/g, "");

        snapDir = snapDir.replace(/(^\s*)/g, "");
        snapDir = snapDir.replace(/(\s*$)/g, "");

        videoDir = videoDir.replace(/(^\s*)/g, "");
        videoDir = videoDir.replace(/(\s*$)/g, "");

        let port = parseInt(szPort);
        let enableHttps = parseInt(this.video_init_data.enableHttps);
        let _this = this
        encryptedFields = encryptedFields.join(",");
        this.oWebControl.JS_RequestInterface({
          funcName: "init",
          argument: JSON.stringify({
            appkey: appkey,
            secret: secret,
            ip: ip,
            playMode: 0, // 0-预览 1-回放
            port: port,
            snapDir: snapDir,
            videoDir: videoDir,
            layout: layout,
            enableHTTPS: enableHttps,
            encryptedFields: encryptedFields,
            showToolbar: 1,                               //是否显示工具栏，0-不显示，非0-显示
            showSmart: 1,                                 //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
            buttonIDs: "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769",  //自定义工具条按钮
          })
        }).then(function (oData) {
          console.log(JSON.stringify(oData ? oData.responseMsg : ''))
          // 预览
          _this.getDataList();
          // _this.startRealPlay();
          // _this.startPlayBack();
        });
      })
    },
    // 获取公钥
    getPubKey (callback) {
      // console.log(this.oWebControl,'oWebControloWebControl')
      this.oWebControl.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
          keyLength: 1024
        })
      }).then((oData) => {
        // console.log(oData)
        if (oData.responseMsg.data) {
          this.pubKey = oData.responseMsg.data
          callback()
        }
      })
    },
    // RSA加密
    setEncrypt (value) {
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    // 视频预览
    startRealPlay (IndexCode) {
      console.log('------开始播放-------')
      let cameraIndexCode = this.video_play_data.cameraIndexCode;
      let streamMode = this.video_play_data.streamMode;
      let transMode = this.video_play_data.transMode;
      let gpuMode = this.video_play_data.gpuMode;
      let wndId = this.video_play_data.wndId;  //默认为空闲窗口回放
      let cascade = this.video_play_data.cascade;
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode,
          streamMode: streamMode,
          transMode: transMode,
          gpuMode: gpuMode,
          wndId: wndId,
          cascade: cascade
        })
      }).then(function (oData) {
        console.log('err:', oData)
      });
    },
    // 关闭预览
    endRealPlay (IndexCode) {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview",
        argument: JSON.stringify({
        })
      }).then(function (oData) {
        console.log('err:', oData)
      });
    },
    // 回放
    // startPlayBack (IndexCode) {
    //     console.log('------开始播放-------')
    //     let cameraIndexCode  = '0a1d14fb50ab4b048724ba578a2cf3ff';
    //     let startTimeStamp =  new Date(new Date().toLocaleDateString()).getTime(); // 录像查询开始时间戳，单位：秒
    //     let endTimeStamp = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1); // 录像查询结束时间戳，单位：秒
    //     let recordLocation = 1; // 录像存储类型 0-中心存储 1-设备存储
    //     let transMode = 1; // 传输协议 ，0-UDP 1-TCP
    //     let gpuMode = 1;
    //     let wndId = -1;  //默认为空闲窗口回放
    //     let cascade = 1;
    //     cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
    //     cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, ""); 
    //     this.oWebControl.JS_RequestInterface({
    //         funcName: "startPlayback",
    //         argument: JSON.stringify({
    //             cameraIndexCode : cameraIndexCode ,
    //             startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),
    //             endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),
    //             recordLocation: recordLocation,
    //             transMode: transMode,
    //             gpuMode: gpuMode,
    //             wndId: wndId,
    //             cascade: cascade
    //         })
    //     }).then(function (oData) {
    //         console.log('err:',oData)
    //     });
    // },

    //根据窗口变化设置视频插件大小
    resizewindow (w, h) {
      w = (w < 1423) ? 1423 : w
      h = (h < 754) ? 754 : h
      window.resizeTo(w, h);
    },
    //设置窗口遮挡
    setWndCover () {
      let iWidth = document.body.clientWidth;
      let iHeight = document.body.clientHeight;
      let oDivRect = document.getElementById("divPlugin").getBoundingClientRect();
      let iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left) : 0;
      let iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top) : 0;
      let iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
      let iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;
      iCoverLeft = (iCoverLeft > 700) ? 700 : iCoverLeft;
      iCoverTop = (iCoverTop > 400) ? 400 : iCoverTop;
      iCoverRight = (iCoverRight > 700) ? 700 : iCoverRight;
      iCoverBottom = (iCoverBottom > 400) ? 400 : iCoverBottom;
      if (this.iLastCoverLeft != iCoverLeft) {
        console.log("iCoverLeft: " + iCoverLeft);
        this.iLastCoverLeft = iCoverLeft;
        this.oWebControl.JS_SetWndCover("left", iCoverLeft);
      }
      if (this.iLastCoverTop != iCoverTop) {
        console.log("iCoverTop: " + iCoverTop);
        this.iLastCoverTop = iCoverTop;
        this.oWebControl.JS_SetWndCover("top", iCoverTop);
      }
      if (this.iLastCoverRight != iCoverRight) {
        console.log("iCoverRight: " + iCoverRight);
        this.iLastCoverRight = iCoverRight;
        this.oWebControl.JS_SetWndCover("right", iCoverRight);
      }
      if (this.iLastCoverBottom != iCoverBottom) {
        console.log("iCoverBottom: " + iCoverBottom);
        this.iLastCoverBottom = iCoverBottom;
        this.oWebControl.JS_SetWndCover("bottom", iCoverBottom);
      }
    },
    //关闭所有的播放画面   
    close_all () {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview"
      }).then(function (oData) {
        console.log(JSON.stringify(oData ? oData.responseMsg : ''))
      });
    },
    // 切换路由时插件不遮挡页面
    getPath () {
      let _this = this
      if (this.$route.path != '/VideoSurveillance') {
        console.log(this.$route.path);
        this.oWebControl.JS_HideWnd();// 先让窗口隐藏
        this.endRealPlay();
      } else {
        this.ID = this.$route.query.VID
        this.initPlugin();
        _this.oWebControl.JS_ShowWnd();
      }
    }
  },
  watch: {
    '$route': 'getPath',
    cameraIndexCode (n) {
      this.startRealPlay();
      this.startPlayBack();
    },
    screenWidth (n, o) {
      this.videoWidth = this.$refs.divPlugin.offsetWidth;
      this.videoHeight = this.$refs.divPlugin.offsetHeight;
      this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
      this.resizewindow(n, this.screenHeight);
      this.setWndCover();
    },
    screenHeight (n, o) {
      this.videoWidth = this.$refs.divPlugin.offsetWidth;
      this.videoHeight = this.$refs.divPlugin.offsetHeight;
      this.oWebControl.JS_Resize(this.videoWidth, this.videoHeight);
      this.resizewindow(this.screenWidth, n);
      this.setWndCover();
    },
    //海康的视频播放插件是默认最高层级这样会导致页面中的弹框等被遮挡，定义一个全局的变量videohide
    //当弹框出现时 视频插件隐藏，解决此问题。
    '$store.state.videohide' (n, o) {
      if (n) {
        this.oWebControl.JS_HideWnd();
      } else if (!n) {
        this.oWebControl.JS_ShowWnd();
      }
    },
    videoDialog (n) {
      if (n) {
        this.initPlugin();
      }
    }
  }
};
</script>
<style lang="less" scoped>
.video-player {
  width: 100%;
  height: 100%;
  .divPlugin {
    width: 100%;
    height: 94%;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
  }
  .down {
    width: 100%;
    height: 100%;
    color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    a {
      color: red;
    }
  }
}
</style>
